<template>
  <MainViewer
    v-if="props.page.type === MAIN_VIEWER"
    :index="props.index"
    :active="props.active"
    :ready="props.ready"
    @back="back"
  ></MainViewer>
  <TagList
    v-else-if="props.page.type === TAG_LIST"
    :index="props.index"
    :active="props.active"
    :tag="props.page.tag"
    @back="back"
  ></TagList>
  <Creator
    v-else-if="props.page.type === CREATOR"
    :index="props.index"
    :active="props.active"
    :id="props.page.userId"
    @back="back"
  ></Creator>
  <TagViewer
    v-else-if="props.page.type === TAG_VIEWER"
    :index="props.index"
    :active="props.active"
    :ready="props.ready"
    @back="back"
  ></TagViewer>
  <CreatorViewer
    v-else-if="props.page.type === CREATOR_VIEWER"
    :index="props.index"
    :active="props.active"
    :ready="props.ready"
    @back="back"
  ></CreatorViewer>
</template>

<script setup>
import { provide } from 'vue'
import { CREATOR, CREATOR_VIEWER, MAIN_VIEWER, TAG_LIST, TAG_VIEWER } from '@/constant/viewer-router'
import Creator from './pages/Creator.vue'
import CreatorViewer from './pages/CreatorViewer.vue'
import MainViewer from './pages/MainViewer.vue'
import TagList from './pages/TagList.vue'
import TagViewer from './pages/TagViewer.vue'

const emits = defineEmits(['back'])
function back() {
  emits('back')
}

const props = defineProps({
  page: { type: Object, required: true },
  index: { type: Number, required: true },
  active: { type: Boolean, required: true },
  ready: { type: Boolean, required: true },
})

provide('page', props.page)
</script>
